<template>
  <div class="search-container">
    <div class="search-left">
      <div class="search-header">
        <el-input
          v-model="formInline.keyWorld"
          placeholder="请输入"
          size="default"
          style="width: 300px"
          clearable
          @keyup.enter.prevent="search"
          @clear="clearSearch"
        >
          <template #append>
            <el-button @click="search">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>
    <div class="search-right">
      <Button 
        :type="removeIds && removeIds.length ? 'cancel' : 'disabled'" 
        :disabled="!removeIds || !removeIds.length"
        @click="removeList"
      >
        删除所选
      </Button>
      <Button type="primary" @click="addUser">添加</Button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { userApi } from '@/api/user.js';
import { Delmessage } from '@/utils/message.js';
import { ElMessage } from 'element-plus';

// 定义 props 和 emits
const props = defineProps({
  removeIds: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['search', 'addUser', 'refreshTable']);

// 响应式数据
const formInline = ref({
  keyWorld: ''
});

// 监听 formInline 的变化
console.log('search.vue - 初始化 formInline:', formInline.value);

// 搜索用户
const search = () => {
  console.log('search.vue - 搜索关键字:', formInline.value.keyWorld);
  console.log('search.vue - formInline 对象:', formInline.value);
  console.log('search.vue - 发送事件:', formInline.value.keyWorld);
  emit('search', formInline.value.keyWorld);
};

// 清空搜索
const clearSearch = () => {
  console.log('search.vue - 清空搜索');
  formInline.value.keyWorld = '';
  emit('search', '');
};

// 添加人员
const addUser = () => {
  emit('addUser', { action: 'addNewRow' });
};

// 批量删除
const removeList = () => {
  if (!(props.removeIds && props.removeIds.length)) {
    return;
  }
  
  const closeDialog = Delmessage({
    title: "批量删除确认",
    content: `确定要删除选中的 ${props.removeIds.length} 个用户吗？`,
    submitText: "删除",
    cancel: function() {
      console.log('取消批量删除用户');
      closeDialog(); // 关闭弹窗
    },
    submit: async function() {
      try {
        const [err, res] = await userApi.DeleteUsersChoose(props.removeIds);
        if (err) return;
        
        ElMessage.success('删除成功');
        emit('refreshTable');
        closeDialog(); // 成功后关闭弹窗
      } catch (error) {
        console.error('批量删除用户失败:', error);
        ElMessage.error('删除失败');
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .search-left {
    display: flex;
    align-items: center;

    .el-input {
      :deep(.el-input-group__append) {
        background-color: #1a66ff !important;
        border-color: #1a66ff !important;

        .el-button {
          background-color: transparent !important;
   
          color: white !important;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
          }
        }
      }
    }
  }

  .search-right {
    display: flex;
    gap: 8px;
  }
}
</style>
